<template>
  <div>
    <el-card style="margin: 20px 0">
      <CategorySelect @getcategoryId="getcategoryId" :isshow='ischoose===0'></CategorySelect>
    </el-card>
    <el-card>
      <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 10px"
       @click="addAndupdatespu(id3)" :disabled="id3===''">添加SPU</el-button>
      <!-- 三部分内容切换
      第一部分列表展示 -->
      <div v-show="ischoose===0">
      <el-table :data="spuList">
        <el-table-column
          type="index"
          width="100"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column prop="spuName" label="spu名称"></el-table-column>
        <el-table-column prop="description" label="spu描述"></el-table-column>
        <el-table-column prop="prop" label="操作">
          <template slot-scope="{row}">
            <hint-button title="添加spu" size="mini" icon="el-icon-plus" type="success" @click="addSku(row,id1,id2,id3)" ></hint-button>
            <hint-button  @click="addAndupdatespu(row)" title="修改spu" size="mini" icon="el-icon-edit" type="warning"></hint-button>
            <hint-button @click="checkspuInfo(row)" title="查看当前spu全部sku列表" size="mini" icon="el-icon-info" type="info"
            ></hint-button>
            <el-dialog :title="`${spuNow.spuName}的sku列表`" :visible.sync="dialogTableVisible" :before-close="close">
             <el-table :data="skuList" v-loading="loading">
               <el-table-column property="skuName" label="名称" ></el-table-column>
               <el-table-column property="price" label="价格" ></el-table-column>
               <el-table-column property="weight" label="重量"></el-table-column>
                <el-table-column  label="默认图片">
                  <template slot-scope="{row}">
                  <img :src="row.skuDefaultImg" style="width:100px"></template>
                </el-table-column>
             </el-table>
           </el-dialog>
     
            <el-popconfirm :title="`确定删除${row.spuName}吗？`" @onConfirm="deleteSpu(row)">
            <hint-button slot="reference" title="删除spu" size="mini"  icon="el-icon-delete" type="danger"></hint-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table></div>
      <!-- 第二部分 添加spu-->
      <Spuform v-show="ischoose===1" @changescene='changeScene' @gopage="handleCurrentChange" ref="spu"></Spuform>
      <!-- 第三部分 添加sku-->
      <Skuform v-show="ischoose===2" @changescene='changeScene' ref="sku"></Skuform>
      <!-- 分页器    -->
       <el-pagination
       style="text-align:center"
      :current-page="page"
      :page-sizes="[2, 4, 5, 6]"
      :page-size="limit"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
import Spuform from './Spuform/index'
import Skuform from './Skuform/index'
export default {
  name: "spu_",
  data(){
    return{
       loading: true,
       dialogTableVisible: false,
        isshow:true,
         id1: "",
         id2: "",
         id3: "",
         //分页器
         page:1,
         limit:3,
         total:0,
         spuNow:{},
         spuList:[],
         skuList:[],
        ischoose:0//0:展示列表 1：添加/修改spu 2：添加sku
    }
  },
  methods:{
   //1.获得spu列表
   async getSpulist(){
      const {page,limit,id3}=this
      let result=await this.$API.spu.reqSpulist(page,limit,id3)
      if(result.code===200){
        this.spuList=result.data.records
        this.total=result.data.total
     }
    },
    //2.获得id3发送请求
    getcategoryId({cateid,level}){
        if(level===1){
            this.id1=cateid
            this.id2=''
            this.id3=''
        }
        if (level === 2) {
        this.id2 = cateid;
        this.id3 = "";
      }
      if (level === 3) {
        this.id3 = cateid;
        this.getSpulist()
      }

    },
    //3.点击分页器页数触发事件
    handleCurrentChange(page){
      this.page=page
      this.getSpulist()
    },
    //4.点击分页器每页显示数触发事件
    handleSizeChange(limit){
      this.limit=limit
      this.getSpulist()
    },
    //5.自定义事件回调
    changeScene(data){
     this.ischoose=data
     this.getSpulist()
    },
    //6.添加和修改spu
    addAndupdatespu(row){
      this.ischoose=1
      this.$refs.spu.getSpuList(row)
    },
    //7.删除spu
   async deleteSpu(row){
    try {
     let result=await this.$API.spu.reqDeletespu(row.id)
     if(result.code==200){
      this.$message({type:'success',message:'删除信息成功！'})
      let page=this.spuList.length>1?this.page:this.page-1
      this.handleCurrentChange(page)
      // this.getSpulist()
     }
      
    } catch (error) {
      console.log(error.message)
    }
    },
    //8.添加spu
    addSku(row,id1,id2,id3){
      this.ischoose=2
      this.$refs.sku.getSkulist(row,id1,id2,id3)
    },
    //9.查看sku
   async checkspuInfo(row){
    this.spuNow=row
    this.dialogTableVisible = true
    let result=await this.$API.spu.reqGetskuInfo(row.id)
    if(result.code==200){
      this.skuList=result.data
      this.loading=false
    }
    },
    //关闭对话框的回调
    close(done){
      this.loading=true,
      this.skuList=[]
      done()
    }
  },
  components:{Spuform,Skuform}
};
</script>

<style>
</style>